<template v-if="visible">
    <a-modal v-model:open="visible" :title="title" style="width: 800px" @ok="handleOk">
        <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="{ span: 4 }"
            autocomplete="off"
            v-if="visible"
        >
            <a-form-item label="贫困县名字" name="countyName">
                <a-input v-model:value="formState.countyName" />
            </a-form-item>
            <!-- 贫困组成 -->
            <a-row>
                <a-form-item
                    label="低保户"
                    name="low"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.povertyComposition.low" />
                </a-form-item>
                <a-form-item
                    label="一般贫困"
                    name="middle"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.povertyComposition.middle" />
                </a-form-item>
                <a-form-item
                    label="五保户"
                    name="heigh"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.povertyComposition.heigh" />
                </a-form-item>
            </a-row>

            <!-- 年龄分布 -->
            <a-row>
                <a-form-item
                    label="16岁以下"
                    name="sixDowm"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.ageDistribution.sixDowm" />
                </a-form-item>
                <a-form-item
                    label="16-30岁"
                    name="six"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.ageDistribution.six" />
                </a-form-item>
                <a-form-item
                    label="31-45岁"
                    name="three"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.ageDistribution.three" />
                </a-form-item>
                <a-form-item
                    label="46-60岁"
                    name="four"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.ageDistribution.four" />
                </a-form-item>
                <a-form-item
                    label="60岁以上"
                    name="sixty"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.ageDistribution.sixty" />
                </a-form-item>
            </a-row>

            <!-- 人口规模 -->
            <a-row>
                <a-form-item
                    label="一人户"
                    name="onePerson"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.populationSize.onePerson" />
                </a-form-item>
                <a-form-item
                    label="二人户"
                    name="twoPerson"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.populationSize.twoPerson" />
                </a-form-item>
                <a-form-item
                    label="三人户"
                    name="threePerson"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.populationSize.threePerson" />
                </a-form-item>
                <a-form-item
                    label="四人户"
                    name="fourPerson"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.populationSize.fourPerson" />
                </a-form-item>
                <a-form-item
                    label="五人户"
                    name="fivePerson"
                    :label-col="{ span: 12 }"
                    style="width: 180px"
                >
                    <a-input-number v-model:value="formState.populationSize.fivePerson" />
                </a-form-item>
                <a-form-item
                    label="六人户及以上"
                    name="moreThanSixPerson"
                    :label-col="{ span: 12 }"
                    style="width: 200px"
                >
                    <a-input-number v-model:value="formState.populationSize.moreThanSixPerson" />
                </a-form-item>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { Ref } from 'vue'
import Lodash from 'lodash'

import { toast } from '@/utils/common'
import { Edit } from '../../store'
import type { ItemResponse } from '../../type'
const defaultFormState = {
    id: '',
    countyName: '',
    povertyComposition: {
        low: '',
        middle: '',
        heigh: ''
    },
    ageDistribution: {
        sixDowm: '',
        six: '',
        three: '',
        four: '',
        sixty: ''
    },
    populationSize: {
        onePerson: '',
        twoPerson: '',
        threePerson: '',
        fourPerson: '',
        fivePerson: '',
        moreThanSixPerson: ''
    },
    reasons: []
}
export default defineComponent({
    name: 'EditDialog',
    emits: ['refresh'],

    setup(props, { emit }) {
        const state = reactive({
            visible: false,
            title: '',
            formState: JSON.parse(JSON.stringify(defaultFormState))
        })

        const constants = {
            rules: {
                name: {
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                },
                review: {
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }
            }
        }
        const components = {
            formRef: ref<FormInstance>()
        } as {
            formRef: Ref<FormInstance>
        }
        const methods = {
            open(row?: ItemResponse) {
                state.title = row?.id ? '编辑' : '新增'
                if (row) {
                    state.formState = Lodash.cloneDeep(row)
                } else {
                    state.formState = Lodash.cloneDeep(defaultFormState)
                }
                state.visible = true
            },
            async handleOk() {
                const isOK = await components.formRef.value.validateFields()
                if (!isOK) return
                let params = Lodash.cloneDeep(state.formState)

                const res: any = await Edit(params)
                if (res.status === 201) {
                    toast('err', '', res.msg)
                    return
                }
                emit('refresh')
                state.visible = false
                toast()
            }
        }

        return {
            ...toRefs(state),
            ...methods,
            ...constants,
            ...components
        }
    }
})
</script>
